<template>
  <div>
    <div class="administrator-container">
      <div class="login">
        <div class="card">
          <h2>Administrators</h2>
          <div class="username">
            <div class="group">
              <input required="" type="text" class="input" v-model.trim="username"/>
              <span class="highlight"></span>
              <span class="bar"></span>
              <label>Name</label>
            </div>
          </div>
          <div class="password">
            <div class="group">
              <input required="" type="password" class="input" v-model.trim="password"/>
              <span class="highlight"></span>
              <span class="bar"></span>
              <label>Password</label>
            </div>
          </div>
          <button class="learn-more" @click="Submit">
            <span class="circle" aria-hidden="true">
              <span class="icon arrow"></span>
            </span>
            <span class="button-text">Learn More</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAdministratorAPI } from '@/api/AdministratorAPI'
export default {
  data() {
    return {
      username: '',
      password: '',
      tag: ''

    }
  },
  methods: {
    Submit() {
      if (this.username.length !== 0 && (this.password.length < 18) & (this.password.length >= 6)) {
        this.getAdministrator()
      } else {
        this.$message({
          showClose: true,
          message: '登录失败',
          type: 'error'
        })
      }
    },
    async getAdministrator() {
      const { data: res } = await getAdministratorAPI(this.username, this.password)
      localStorage.setItem('tag', res.data.tag)
      if (res.code !== 0) {
        this.$message({
          showClose: true,
          message: '登录失败',
          type: 'error'
        })
      } else {
        this.$message({
          showClose: true,
          message: '登录成功',
          type: 'success'
        })
        this.$router.replace('/main')
      }
    }
  },
  components: {}
}
</script>
<style scoped>
html {
  font-family: 'Orbitron', sans-serif;
}
.administrator-container {
  width: 100%;
  height: 100%;
}
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.card {
  width: 500px;
  height: 300px;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: #ebeef5 1px solid;
  box-shadow: 0px 2px 8px #ebeef5;
  margin-top: 14%;
}
.username,
.password {
  width: 100%;
  display: flex;
  justify-content: center;
}
.group {
  position: relative;
}

.input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 200px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.input:focus ~ label,
.input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264ae;
}

.bar {
  position: relative;
  display: block;
  width: 200px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264ae;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

.input:focus ~ .bar:before,
.input:focus ~ .bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

.input:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
  from {
    background: #5264ae;
  }

  to {
    width: 0;
    background: transparent;
  }
}
button {
 position: relative;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 background: transparent;
 padding: 0;
 font-size: inherit;
 font-family: inherit;
}

button.learn-more {
 width: 12rem;
 height: auto;
}

button.learn-more .circle {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: relative;
 right: 5px;
 display: block;
 margin: 0;
 width: 3rem;
 height: 3rem;
 background: #282936;
 border-radius: 1.625rem;
}

button.learn-more .circle .icon {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #fff;
}

button.learn-more .circle .icon.arrow {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 left: 0.625rem;
 width: 1.125rem;
 height: 0.125rem;
 background: none;
}

button.learn-more .circle .icon.arrow::before {
 position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 transform: rotate(45deg);
}

button.learn-more .button-text {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.75rem 0;
 margin: 0 0 0 1.85rem;
 color: #282936;
 font-weight: 700;
 line-height: 1.6;
 text-align: center;
 text-transform: uppercase;
}

button:hover .circle {
 width: 100%;
}

button:hover .circle .icon.arrow {
 background: #fff;
 transform: translate(1rem, 0);
}

button:hover .button-text {
 color: #fff;
}
</style>
